<!DOCTYPE html>
<html>
<head>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" media="all">
  <script type="text/javascript" src="/static/layui/layui.js"></script>
  <style type="text/css">
    .header span{background:#009688;margin-left:30px;padding:10px;color:#ffffff;}
    .header div{border-bottom:solid 2px #009688;margin-top: 8px;}
    .header button{float:right;margin-top:-5px;}
  </style>
</head>
<body style="padding:10px; box-sizing: border-box;">
<form class="layui-form">
  <div class="layui-form-item">
    <label class="layui-form-label">上级分类</label>
    <div class="layui-input-inline">
      <select name="pid" lay-verify="required">
        <option value="0">顶级分类</option>
        {foreach($lists as $lists_v)}
          {if($lists_v['parent_id']==0)}
            {if($pid==$lists_v['id'])}
            <option value="{$lists_v['id']}" selected>{$lists_v['title']}</option>
            {else/}
            <option value="{$lists_v['id']}">{$lists_v['title']}</option>
            {/if}
          {/if}
        {/foreach}
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">分类名</label>
    <div class="layui-input-inline">
      <input type="text" class="layui-input" name="title" placeholder="分类名称">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">图标</label>
    <div class="layui-input-inline">
      <input type="text" class="layui-input" name="icon" placeholder="图标">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">排序</label>
    <div class="layui-input-inline">
      <input type="text" class="layui-input" name="sort" placeholder="排序从小到大">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">状态</label>
    <div class="layui-input-block" style="display: flex; gap: 30px;">
      <div>
        <input type="checkbox" name="show_switch" lay-skin="switch" lay-text="显示|隐藏" lay-filter="showSwitch" checked>
        <input type="hidden" name="show" value="0" id="showValue">
      </div>
      <div>
        <input type="checkbox" name="encrypt" lay-skin="switch" lay-text="公开|加密" lay-filter="encryptSwitch" checked>
        <input type="hidden" name="encrypt" value="0" id="encryptValue">
      </div>
    </div>
  </div>
</form>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button type="button" class="layui-btn" onclick="save()">保存</button>
  </div>
</div>
<script type="text/javascript">
  layui.use(['form'],function(){
    form = layui.form;
    $ = layui.jquery;
    
    // 监听显示开关的切换
    form.on('switch(showSwitch)', function(data){
      // 如果开关打开，设置值为0（显示），否则为1（隐藏）
      $('#showValue').val(this.checked ? 0 : 1);
    });
    
    // 监听加密开关的切换
    form.on('switch(encryptSwitch)', function(data){
      // 如果开关打开，设置值为0（公开），否则为1（加密）
      $('#encryptValue').val(this.checked ? 0 : 1);
    });
  });
  function save(){
    $.post(
            "/admin/fenleiadd",
            $('form').serialize(),//序列化表单
            function(res){
              console.log(res);
              if (res.code==0) {
                layer.msg(res.msg,{"icon":1});
                setTimeout(function () {
                  parent.window.location.reload();
                },1000)
              } else {
                layer.msg(res.msg,{"icon":2});
              }
            }, "json");
  }
</script>
</body>
</html>